Skip to main content

Snapshot sharing menu

Overriding snapshot sharing options​

You can override default snapshot menu options by providing SnapshotMenuItems into uiOverrides prop to the ChartReactApp

interface ChartSnapshotMenuItem {
    /**
     * unique key for dropdown item
     */
    readonly key: string;
    readonly onSelect?: () => void;
    readonly icon?: React.ReactNode;
    /**
     * label will be rendered in the menu
     */
    readonly label: string;
}

The list of default snapshot items:

DEFAULT_SNAPSHOT_MENU_ITEMS: Array<SnapshotMenuItemDeclaration> = [
    'downloadImage',
    'copyImage',
    'copyLink',
    'tweet',
    'telegram',
]

Example​

Source code:

import React from 'react';
import { DrawingsSidebarFooterStyled } from '@dx-private/dxchart5-react/dist/chart/components/chart-sidebar/chart-drawings-sidebar-footer.styled';
import { ChartMainAreaStyled } from '@dx-private/dxchart5-react/dist/chart/components/multi-chart/multi-chart.styled';
import { createGlobalStyle } from 'styled-components';
import { FlexContainer } from '../../../../src/components/FlexContainer';
import { ChartReactAppWrapper } from '../../../../src/components/ChartReactApp';
// TESTING GROUND
const GlobalStyles = createGlobalStyle`
    ${ChartMainAreaStyled} {
        height: calc(100% + 44px);
    }
    ${DrawingsSidebarFooterStyled} {
        position: static;
    }
`;
export const OverridingSnapshotOptions = () => {
    const overridenSnapshotItems = ['downloadImage', 'copyImage', 'copyLink'];
    return (
        <>
            <FlexContainer justifyContent={'flex-start'}>
                {/* TODO fix TS error */}
                {/* @ts-ignore */}
                <ChartReactAppWrapper uiOverrides={{ SnapshotMenuItems: overridenSnapshotItems }} />
                {/* @ts-ignore types are not compatible with react 18 */}
                <GlobalStyles />
            </FlexContainer>
        </>
    );
};